<template>
  <view class="work-container">
    <!-- 知识库总统计 -->
    <view class="u-demo-block__content" style="height: 100rpx">
      <u-row justify="center" gutter="8" style="margin-top: 60px">
        <u-col span="1">
          <view class="demo-layout bg-purple bjwidth">
            <u-button
              class="bg-layout"
              style="color: #000; font-weight: 600; border-width: 0px"
            >
              {{ zsk["all"] }}
            </u-button>
          </view>
        </u-col>
      </u-row>
    </view>
    <view class="grid-body">
      <u-row justify="center">
        <u-col span="9">
          <u--text
            class="text"
            size="14"
            lineHeight="20"
            :text="texttxt"
          ></u--text>
        </u-col>
      </u-row>
    </view>
    <view class="grid-body">
      <u-row justify="center" style="margin-top: 20px">
        <u-col span="9">
          <u--input
            style="
              border: 1px solid #979797;
              background: rgba(216, 216, 216, 0.39);
              color: #000;
            "
            placeholder="关键词搜索"
            placeholderStyle="color: #000000"
            color="#000"
            inputAlign="center"
            shape="circle"
            v-model="value"
            @blur="searchBlur"
          >
          </u--input>
        </u-col>
      </u-row>
    </view>
    <!-- 每一项统计 -->
    <view class="grid col-2 padding-sm">
      <view class="padding-sm">
        <view
          class="bg-gradual-red padding radius text-center shadow-blur"
          @click="btnDetails(0)"
        >
          <span class="span-texts">
            <uni-icons
              custom-prefix="iconfont"
              type="icon-tongzhigonggao"
              size="22"
              color="#eee"
            >
            </uni-icons>
          </span>
          <view>
            <view class="text-lg fontsizetop">通知公告</view>
            <text class="text-blues">{{ zsk.notice }}条 </text>
          </view>
        </view>
      </view>
      <view class="padding-sm" @click="toxczl(1)">
        <view class="bg-gradual-orange padding radius text-center shadow-blur">
          <span class="span-texts">
            <uni-icons
              custom-prefix="iconfont"
              type="icon-a-guizhangzhidufalvfagui-02"
              size="22"
              color="#eee"
            >
            </uni-icons>
          </span>
          <view class="text-lg fontsizetop">法律法规</view>
          <text class="text-blues">{{ zsk["1"] }}条 </text>
        </view>
      </view>
      <view class="padding-sm" @click="toxczl(2)">
        <view class="bg-gradual-green padding radius text-center shadow-blur">
          <span class="span-texts">
            <uni-icons
              custom-prefix="iconfont"
              type="icon-a-guizhangzhidufalvfagui-39"
              size="22"
              color="#eee"
            >
            </uni-icons>
          </span>
          <view class="text-lg fontsizetop">规章制度</view>
          <text class="text-blues">{{ zsk["2"] }}条 </text>
        </view>
      </view>
      <view class="padding-sm" @click="toxczl(3)">
        <view class="bg-gradual-blue padding radius text-center shadow-blur">
          <span class="span-texts">
            <uni-icons
              custom-prefix="iconfont"
              type="icon-wenjianjia"
              size="22"
              color="#eee"
            >
            </uni-icons>
          </span>
          <view class="text-lg fontsizetop">标准文件</view>
          <text class="text-blues">{{ zsk["3"] }}条 </text>
        </view>
      </view>
      <view class="padding-sm" @click="toxczl(4)">
        <view class="bg-gradual-red padding radius text-center shadow-blur">
          <span class="span-texts">
            <uni-icons
              custom-prefix="iconfont"
              type="icon-bianjiwenjian"
              size="22"
              color="#eee"
            >
            </uni-icons>
          </span>
          <view class="text-lg fontsizetop">规范性文件</view>
          <text class="text-blues">{{ zsk["4"] }}条 </text>
        </view>
      </view>
      <view class="padding-sm" @click="toxczl(5)">
        <view class="bg-gradual-orange padding radius text-center shadow-blur">
          <span class="span-texts">
            <uni-icons
              custom-prefix="iconfont"
              type="icon-ziliaoxiangqing"
              size="22"
              color="#eee"
            >
            </uni-icons>
          </span>
          <view class="text-lg fontsizetop">宣传资料</view>
          <text class="text-blues">{{ zsk["5"] }}条 </text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { zskList } from "@/api/zs/zsk.js";
export default {
  data() {
    return {
      color: "#c0c4cc",
      value: "", //关键词
      texttxt:
        "已收录通知公告，法律法规，规章制度，保准，规范性文件，宣传资料等文章数",
      numberone: 2,
      current: 0,
      swiperDotIndex: 0,
      zsk: {},
    };
  },
  mounted() {
    this.getZskList();
  },
  methods: {
    clickBannerItem(item) {
      console.info(item);
    },
    changeSwiper(e) {
      this.current = e.detail.current;
    },
    changeGrid(e) {
      console.log("232");
      this.$tab.navigateTo("/pages/work/index.vue");
    },
    //关键词搜索
    // search(res) {
    // 	uni.showToast({
    // 		title: '搜索：' + res.value,
    // 		icon: 'none'
    // 	})
    // },
    searchBlur() {
			if(this.value === "") return
			uni.navigateTo({
				url:`/pages/mine/about/search?fileName=${this.value}`
			});
    },
    // btnDetails() {
    // 	this.$tab.navigateTo("/pages/mine/about/index");
    // }
    btnDetails(data) {
      uni.navigateTo({
      	url:`/pages/mine/about/xczl?id=${data}`
      });
    },
		toxczl(data){
			uni.navigateTo({
				url:`/pages/mine/about/xczl?id=${data}`
			});
		},
    // 知识库数据
    getZskList() {
      zskList()
        .then((result) => {
          this.zsk = result.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
/* #ifndef APP-NVUE */
page {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background-color: #fff;
  min-height: 100%;
  height: auto;
}

view {
  font-size: 14px;
  line-height: inherit;
}

/* #endif */

.text {
  text-align: center;
  font-size: 36rpx;
  margin-top: 10rpx;
}

.grid-item-box {
  flex: 1;
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  align-items: center;
  justify-content: center;
  padding: 35rpx 0;
}

.uni-margin-wrap {
  width: 690rpx;
  width: 100%;
}

.swiper {
  height: 300rpx;
}

.swiper-box {
  height: 150px;
}

.swiper-item {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  height: 300rpx;
  line-height: 300rpx;
}

@media screen and (min-width: 500px) {
  .uni-swiper-dot-box {
    width: 400px;
    /* #ifndef APP-NVUE */
    margin: 0 auto;
    /* #endif */
    margin-top: 8px;
  }

  .image {
    width: 100%;
  }
}

.wrap {
  padding: 24rpx;
}

.demo-layout {
  border-radius: 4px;
}

.bg-purple {
  background: #d8d8d8;
  border: 1px solid #979797;
}

.bg-purple-light {
  background: #e5e9f2;
}

.bg-purple-dark {
  background: #99a9bf;
}

.borderbk {
  border: 1px solid #a7a7a7;
}

.text {
  margin: 0 auto;
}

.span-text {
  font-size: 18px;
  color: #eee;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

uni-view {
  font-size: 36rpx;
  line-height: 30px;
}

.textAbc {
  font-size: 16px;
  font-weight: 600;
  margin: 0px 2px 0px -40px;
}

.bg-gradual-red {
  background-image: linear-gradient(45deg, #d26354, #e47556);
  color: #ffffff;
  border-radius: 4px;
}

.bg-gradual-orange {
  background-image: linear-gradient(45deg, #4f8fb7, #67b0cc);
  color: #ffffff;
  border-radius: 5px;
}

.bg-gradual-green {
  background-image: linear-gradient(45deg, #60aca9, #72c0ad);
  color: #ffffff;
  border-radius: 5px;
}

.bg-gradual-blue {
  background-image: linear-gradient(45deg, #f0975c, #f1ae54);
  color: #ffffff;
  border-radius: 5px;
}

.u-button {
  height: 50rpx;
}

.bg-layout {
  border-width: 0px;
  background-image: linear-gradient(
    to right,
    rgb(216, 216, 216),
    rgb(216, 216, 216)
  );
  font-size: 20px;
  font-family: PingFangSC-Semibold, PingFang SC;
  line-height: 28px;
  background-color: rgb(216, 216, 216);
}

.bjwidth {
  width: 27px;
  height: 30px;
}

.u-text__value {
  font-size: 28rpx;
  display: flex;
  flex-direction: row;
  color: #606266;
  flex-wrap: wrap;
  text-overflow: ellipsis;
  align-items: center;
  font-size: 28rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #000000;
  line-height: 40rpx;
}

.fontsizetop {
  font-size: 34rpx;
}

.fontsizebuttom {
  font-size: 28rpx;
}

.span-texts {
  float: left;
  padding-left: 30rpx;
}

.text-blues {
  margin: 0px 0px 0px -72rpx;
  font-size: 28rpx;
}
</style>
